{% extends "base.html" %}

{% block title %}视频裁剪 - BBDown Web UI{% endblock %}

{% block extra_css %}
<style>
.video-preview {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 30px;
    text-align: center;
}

.video-preview video {
    width: 100%;
    border-radius: 8px;
    background: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.video-info {
    margin: 30px 0;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.info-item {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.info-label {
    font-weight: bold;
    width: 80px;
    color: #666;
}

.info-value {
    flex: 1;
    color: #333;
}

.rename-btn {
    margin-left: 10px;
    padding: 4px 8px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

.rename-btn:hover {
    background: #e0e0e0;
}

.dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-content {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dialog-content h3 {
    margin: 0 0 20px;
    color: #333;
    font-size: 1.25rem;
}

.filename-input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
}

.filename-input:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26,115,232,.2);
    outline: none;
}

.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.dialog-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.dialog-buttons button:first-child {
    background: #f0f0f0;
}

.dialog-buttons button:first-child:hover {
    background: #e0e0e0;
}

.dialog-buttons button:last-child {
    background: #1a73e8;
    color: #fff;
}

.dialog-buttons button:last-child:hover {
    background: #1557b0;
}
</style>
{% endblock %}

{% block content %}
<h1 class="mb-4">视频裁剪</h1>

<!-- 视频裁剪表单 -->
<div class="section">
    <form id="cut-form">
        <div class="form-group">
            <label for="video-file">选择视频文件：</label>
            <input type="file" class="form-control" id="video-file" name="video-file" accept="video/*" required>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="start-time">开始时间：</label>
                    <input type="text" class="form-control" id="start-time" name="start-time" placeholder="格式：HH:MM:SS" required>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="end-time">结束时间：</label>
                    <input type="text" class="form-control" id="end-time" name="end-time" placeholder="格式：HH:MM:SS" required>
                </div>
            </div>
        </div>
        
        <div class="alert alert-info mt-3">
            <h5>优化建议：</h5>
            <ul class="mb-0">
                <li>对于长视频，建议裁剪时长不超过原视频的10%，这样可以启用快速裁剪模式</li>
                <li>快速裁剪模式不会重新编码视频，可以显著提高处理速度</li>
                <li>如果需要精确裁剪，系统会自动使用标准模式（重新编码）</li>
            </ul>
        </div>
        
        <button type="submit" class="btn btn-primary">开始裁剪</button>
    </form>
</div>

<!-- 裁剪进度 -->
<div id="cut-progress" class="section" style="display: none;">
    <h2>裁剪进度</h2>
    <div class="mb-2">
        <span id="current-step" class="text-muted">准备裁剪...</span>
        <div id="loading-spinner" class="spinner-border spinner-border-sm text-primary ms-2" role="status" style="display: none;">
        </div>
    </div>
    <div class="progress mb-4">
        <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" 
             role="progressbar" style="width: 0%">0%</div>
    </div>
    <div class="d-flex justify-content-between">
        <small id="cut-status" class="text-muted">状态: 等待中</small>
    </div>
</div>

<!-- 下载链接 -->
<div id="download-link" class="section" style="display: none;">
    <h2>下载链接</h2>
    <div class="download-link-container">
        <a href="#" target="_blank" class="download-button">下载裁剪后的视频</a>
    </div>
</div>

<div class="progress-section" style="display: none;">
    <div class="progress-container">
        <div class="progress-bar">
            <div class="progress-fill"></div>
        </div>
        <div class="progress-text">0%</div>
    </div>
    <div class="status-text">准备中...</div>
</div>

<div class="result-section" style="display: none;">
    <div class="video-preview">
        <video id="preview-video" controls>
            <source src="" type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
    </div>
    <div class="video-info">
        <div class="info-item">
            <span class="info-label">文件名：</span>
            <span class="info-value" id="video-filename"></span>
            <button class="rename-btn" data-action="show-rename-dialog">重命名</button>
        </div>
        <div class="info-item">
            <span class="info-label">文件大小：</span>
            <span class="info-value" id="video-size"></span>
        </div>
        <div class="info-item">
            <span class="info-label">时长：</span>
            <span class="info-value" id="video-duration"></span>
        </div>
    </div>
    <div class="action-buttons">
        <button class="download-btn" data-action="download-video">下载视频</button>
    </div>
</div>

<!-- 重命名对话框 -->
<div id="rename-dialog" class="dialog" style="display: none;">
    <div class="dialog-content">
        <h3>重命名视频</h3>
        <input type="text" id="new-filename" class="filename-input">
        <div class="dialog-buttons">
            <button data-action="hide-rename-dialog">取消</button>
            <button data-action="confirm-rename">确定</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script type="module" src="/static/js/cut.js"></script>
{% endblock %} 